<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交易流水查询</title>
    <style>
        .hidden { display: none; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>交易流水查询</h1>
    
    <div id="auth-section">
        <form method="POST">
            <div>
                <label>身份证号：</label>
                <input type="text" name="pid" required>
            </div>
            <div>
                <label>手机号：</label>
                <input type="tel" name="phone" required>
            </div>
            <div>
                <label>账户密码：</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit">验证身份</button>
        </form>
    </div>
    
    <div id="flow-section" class="{% if not show_flow_section %}hidden{% endif %}">
        <h2>交易流水列表</h2>
        <form method="POST">
            <input type="hidden" name="pid" value="{{ request.form.pid }}">
            <input type="hidden" name="phone" value="{{ request.form.phone }}">
            <input type="hidden" name="password" value="{{ request.form.password }}">
            <input type="hidden" name="export" value="1">
            
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"></th>
                        <th>交易ID</th>
                        <th>交易日期</th>
                        <th>交易类型</th>
                        <th>金额</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for flow in trade_flows %}
                    <tr>
                        <td><input type="checkbox" name="selected_flows" value="{{ flow.tradeid }}"></td>
                        <td>{{ flow.tradeid }}</td>
                        <td>{{ flow.tradedate }}</td>
                        <td>{{ flow.tradetype }}</td>
                        <td>{{ flow.trademoney }}</td>
                        <td>{{ flow.remark }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            <button type="submit">导出选中的报表</button>
        </form>
    </div>
    
    <script>
        // 全选/取消全选功能
        document.getElementById('select-all').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('input[name="selected_flows"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    </script>
</body>
</html>